<template>
  <div class="describe">
    <div
      class="describe__img"
      :style="{ backgroundPosition: detail.positions }"
    ></div>
    <div class="describe__title">{{ detail.title }}</div>
    <div class="describe__desc">{{ detail.desc1 }}</div>
    <div class="describe__desc">{{ detail.desc2 }}</div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});
</script>

<style lang="less">
.describe {
  margin-right: 68px;

  .describe__img {
    background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png);
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
  .describe__title {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
    text-align: center;
    margin: 25px 0 18px 0;
  }
  .describe__desc {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    text-align: center;
  }
}
</style>
